<template>
  <div>
    <el-dialog v-dialogDrag :visible.sync="chartVisible.v" style="width: 100%">
      <div class="content">
        <div id="chart" style="height: 400px;width: auto">
          <v_chart :chartData="chartData" ref="mychart"></v_chart>
        </div>
        <div class="chartIcon">
          <i class="fa fa-pie-chart fa-2x" aria-hidden="true" @click="toPie"></i>
          <i class="fa fa-bar-chart fa-2x" aria-hidden="true" @click="toBar"></i>
          <i class="fa fa-line-chart fa-2x" aria-hidden="true" @click="toLine"></i>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import myChart from '../echarts/myChart'

  export default {
    name: "chartDialog",
    data() {
      return {
        chartType: '',
        chartData: [],
      }
    },
    components: {
      "v_chart": myChart
    },
    props: {
      chartVisible: Object,
    },
    methods: {
      toBar() {
        this.chartType = 'bar';
        this.$Bus.$emit('chartType', this.chartType);
      },
      toPie() {
        this.chartType = 'pie';
        this.$Bus.$emit('chartType', this.chartType);
      },
      toLine() {
        this.chartType = 'line';
        this.$Bus.$emit('chartType', this.chartType);
      }
    },
    created() {
      let that = this;
      this.$Bus.$on('chartVisible.v', (e) => {
        that.chartVisible.v = e;
      });
      this.$Bus.$on('chartParams', (chartData) => {
        // that.chartVisible.v = chartVisible;
        // this.$Bus.$emit('chartData', chartData);
        this.chartData = chartData;
      });

    },
    mounted() {
      // this.$Bus.$emit('chartType',this.chartType);
    }
  }
</script>

<style>
  .chartIcon i {
    margin: 10px;
    border: 1px solid #ddd;
    padding: 6px 8px;
    font-size: 24px;
    text-align: left;
    color: #3a8ee6;
  }

  .chartIcon {
    width: 50px;
    margin-top: 20px;
  }

  #chart {
    flex: 1;
  }

  .content {
    width: auto;
    display: flex;
  }
</style>
